<template>
  <div class="index-container">
    <!-- 第一行 -->
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-alert v-if="noticeList[0]" :closable="noticeList[0].closable">
          <div
            style="display: flex; align-items: center; justify-content: center"
          >
            <a
              target="_blank"
              href="https://github.com/chuzhixin/vue-admin-better"
            >
              <img
                style="margin-right: 10px"
                height="40"
                width="130"
                src="http://qiniu.chzuchen.xyz/other/969f8ad950a44587b1a4bc0ad1a2c783.jpg"
              />
            </a>
            <p v-html="titleContent"></p>
          </div>
        </el-alert>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
        <el-card shadow="never">
          <div slot="header">
            <span>访问量</span>
          </div>
          <vab-chart autoresize :options="fwl" />
          <div class="bottom">
            <span>
              总访问量:

              {{ config1.endVal }}
            </span>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
        <el-card shadow="never">
          <div slot="header">
            <span>授权数</span>
          </div>
          <vab-chart autoresize :options="sqs" />
          <div class="bottom">
            <span>
              总授权数:
              {{ config2.endVal }}
            </span>
          </div>
        </el-card>
      </el-col>
      <!-- 图标 -->
      <el-col
        v-for="(item, index) in iconList"
        :key="index"
        :xs="12"
        :sm="6"
        :md="3"
        :lg="3"
        :xl="3"
      >
        <router-link :to="item.link" target="_blank">
          <el-card class="icon-panel" shadow="never">
            <vab-icon
              :style="{ color: item.color }"
              :icon="['fas', item.icon]"
            ></vab-icon>
            <p>{{ item.title }}</p>
          </el-card>
        </router-link>
      </el-col>
    </el-row>

    <!-- 饼图1 -->
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
        <el-card shadow="never">
          <div slot="header">
            <span>互助</span>
          </div>
          <vab-chart autoresize :options="hz" />
          <div class="bottom">
            <span>
              互助类型数量:

              {{ config3.endVal }}
            </span>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
        <el-card shadow="never">
          <div slot="header">
            <span>活动</span>
          </div>
          <vab-chart autoresize :options="hd" />
          <div class="bottom">
            <span>
              活动类型数量:

              {{ config4.endVal }}
            </span>
          </div>
        </el-card>
      </el-col>
      <!-- 有进度条 -->
      <el-col :xs="24" :sm="24" :md="13" :lg="12" :xl="12">
        <plan style="height: 517px"></plan>
      </el-col>
    </el-row>

    <!-- 饼图2 -->
    <el-row :gutter="20">
      <el-col
        :xs="24"
        :sm="24"
        :md="12"
        :lg="6"
        :xl="6"
        style="margin-top: -267px"
      >
        <el-card shadow="never">
          <div slot="header">
            <span>相册</span>
          </div>
          <vab-chart autoresize :options="xc" />
          <div class="bottom">
            <span>
              相册类型数量:

              {{ config5.endVal }}
            </span>
          </div>
        </el-card>
      </el-col>
      <el-col
        :xs="24"
        :sm="24"
        :md="12"
        :lg="6"
        :xl="6"
        style="margin-top: -267px"
      >
        <el-card shadow="never">
          <div slot="header">
            <span>资讯</span>
          </div>
          <vab-chart autoresize :options="zx" />
          <div class="bottom">
            <span>
              资讯类型数量:

              {{ config6.endVal }}
            </span>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import VabChart from '@/plugins/echarts'
  import Plan from './components/Plan'
  import {
    classificationPie,
    authorizationQuantity,
    visitQuantity,
  } from '@/api/management/management'
  export default {
    name: 'Index',
    components: {
      VabChart,
      Plan,
    },
    data() {
      return {
        titleContent: '滁院校友圈祝您万事顺遂，身体健康',

        timer: 0,
        config1: {
          startVal: 0,
          endVal: this.$baseLodash.random(5000, 60000),
          decimals: 0,
          prefix: '',
          suffix: '',
          separator: ',',
          duration: 8000,
        },
        config2: {
          startVal: 0,
          endVal: this.$baseLodash.random(1000, 20000),
          decimals: 0,
          prefix: '',
          suffix: '',
          separator: ',',
          duration: 8000,
        },
        //饼图
        config3: {
          startVal: 0,
          endVal: 0,
          decimals: 0,
          prefix: '',
          suffix: '',
          separator: ',',
          duration: 8000,
        },
        config4: {
          startVal: 0,
          endVal: 0,
          decimals: 0,
          prefix: '',
          suffix: '',
          separator: ',',
          duration: 8000,
        },
        config5: {
          startVal: 0,
          endVal: 0,
          decimals: 0,
          prefix: '',
          suffix: '',
          separator: ',',
          duration: 8000,
        },
        config6: {
          startVal: 0,
          endVal: 0,
          decimals: 0,
          prefix: '',
          suffix: '',
          separator: ',',
          duration: 8000,
        },

        //访问量
        fwl: {
          color: [
            '#1890FF',
            '#36CBCB',
            '#4ECB73',
            '#FBD437',
            '#F2637B',
            '#975FE5',
          ],
          backgroundColor: 'rgba(252,252,252,0)',
          tooltip: {
            // 鼠标悬浮提示框显示 X和Y 轴数据
            trigger: 'item',
          },
          grid: {
            top: '4%',
            left: '2%',
            right: '10%',
            bottom: '0%',
            containLabel: true,
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: [],
              axisTick: {
                alignWithLabel: true,
              },
            },
          ],
          yAxis: [
            {
              type: 'value',
            },
          ],
          series: [
            {
              name: '访问量',
              type: 'line',
              data: [],
              smooth: true,
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'blue', // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: 'white', // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
          ],
        },
        fwlData: '',
        //授权数
        sqs: {
          color: [
            '#1890FF',
            '#36CBCB',
            '#4ECB73',
            '#FBD437',
            '#F2637B',
            '#975FE5',
          ],
          backgroundColor: 'rgba(252,252,252,0)',
          tooltip: {
            // 鼠标悬浮提示框显示 X和Y 轴数据
            trigger: 'axis',
          },
          grid: {
            top: '4%',
            left: '2%',
            right: '4%',
            bottom: '0%',
            containLabel: true,
          },
          xAxis: [
            {
              type: 'category',
              /*boundaryGap: false,*/
              data: ['0时', '4时', '8时', '12时', '16时', '20时', '24时'],
              axisTick: {
                alignWithLabel: true,
              },
            },
          ],
          yAxis: [
            {
              type: 'value',
            },
          ],
          series: [
            {
              name: '授权数',
              type: 'bar',
              barWidth: '60%',
              data: [10, 52, 20, 33, 39, 33, 22],
            },
          ],
        },
        sqsData: '',
        //词云
        cy: {
          grid: {
            top: '4%',
            left: '2%',
            right: '4%',
            bottom: '0%',
          },
          series: [
            {
              type: 'wordCloud',
              gridSize: 15,
              sizeRange: [12, 40],
              rotationRange: [0, 0],
              width: '100%',
              height: '100%',
              textStyle: {
                normal: {
                  color() {
                    const arr = [
                      '#5470c6',
                      '#91cc75',
                      '#fac858',
                      '#ee6666',
                      '#73c0de',
                      '#975FE5',
                    ]
                    let index = Math.floor(Math.random() * arr.length)
                    return arr[index]
                  },
                },
              },
              data: [
                {
                  name: 'vue-admin-better',
                  value: 15000,
                },
                {
                  name: 'element',
                  value: 10081,
                },
                {
                  name: 'beautiful',
                  value: 9386,
                },

                {
                  name: 'vue',
                  value: 6500,
                },
                {
                  name: 'chuzhixin',
                  value: 6000,
                },
                {
                  name: 'good',
                  value: 4500,
                },
                {
                  name: 'success',
                  value: 3800,
                },
                {
                  name: 'never',
                  value: 3000,
                },
                {
                  name: 'boy',
                  value: 2500,
                },
                {
                  name: 'girl',
                  value: 2300,
                },
                {
                  name: 'github',
                  value: 2000,
                },
                {
                  name: 'hbuilder',
                  value: 1900,
                },
                {
                  name: 'dcloud',
                  value: 1800,
                },
                {
                  name: 'china',
                  value: 1700,
                },
                {
                  name: '1204505056',
                  value: 1600,
                },
                {
                  name: '972435319',
                  value: 1500,
                },
                {
                  name: 'young',
                  value: 1200,
                },
                {
                  name: 'old',
                  value: 1100,
                },
                {
                  name: 'vuex',
                  value: 900,
                },
                {
                  name: 'router',
                  value: 800,
                },
                {
                  name: 'money',
                  value: 700,
                },
                {
                  name: 'qingdao',
                  value: 800,
                },
                {
                  name: 'yantai',
                  value: 9000,
                },
                {
                  name: 'author is very cool',
                  value: 9200,
                },
              ],
            },
          ],
        },

        //互助
        hz: {
          color: [
            '#1890FF',
            '#36CBCB',
            '#4ECB73',
            '#FBD437',
            '#F2637B',
            '#975FE5',
          ],
          backgroundColor: 'rgba(252,252,252,0)',
          tooltip: {
            // 鼠标悬浮提示框显示 X和Y 轴数据
            trigger: 'item',
            backgroundColor: 'rgba(32, 33, 36,.7)',
            borderColor: 'rgba(32, 33, 36,0.20)',
            borderWidth: 1,
            textStyle: {
              // 文字提示样式
              color: '#fff',
              fontSize: '12',
            },
            axisPointer: {
              // 坐标轴虚线
              type: 'cross',
              label: {
                backgroundColor: '#6a7985',
              },
            },
          },
          grid: {
            top: '4%',
            left: '2%',
            right: '4%',
            bottom: '0%',
            containLabel: true,
          },
          xAxis: [
            {
              type: 'category',
              /*boundaryGap: false,*/
              data: [],
              axisTick: {
                alignWithLabel: true,
              },
            },
          ],
          yAxis: [
            {
              type: 'value',
            },
          ],
          series: [
            {
              name: '互助数量',
              type: 'pie',
              barWidth: '60%',
              data: {
                name: '互助',
                value: '5',
              },
            },
          ],
        },
        //活动
        hd: {
          color: [
            '#1890FF',
            '#36CBCB',
            '#4ECB73',
            '#FBD437',
            '#F2637B',
            '#975FE5',
          ],
          backgroundColor: 'rgba(252,252,252,0)',
          tooltip: {
            // 鼠标悬浮提示框显示 X和Y 轴数据
            trigger: 'item',
            backgroundColor: 'rgba(32, 33, 36,.7)',
            borderColor: 'rgba(32, 33, 36,0.20)',
            borderWidth: 1,
            textStyle: {
              // 文字提示样式
              color: '#fff',
              fontSize: '12',
            },
            axisPointer: {
              // 坐标轴虚线
              type: 'cross',
              label: {
                backgroundColor: '#6a7985',
              },
            },
          },
          grid: {
            top: '4%',
            left: '2%',
            right: '4%',
            bottom: '0%',
            containLabel: true,
          },
          xAxis: [
            {
              type: 'category',
              /*boundaryGap: false,*/
              data: [],
              axisTick: {
                alignWithLabel: true,
              },
            },
          ],
          yAxis: [
            {
              type: 'value',
            },
          ],
          series: [
            {
              name: '活动数量',
              type: 'pie',
              barWidth: '60%',
              data: {
                name: '活动',
                value: '5',
              },
            },
          ],
        },
        //相册
        xc: {
          color: [
            '#1890FF',
            '#36CBCB',
            '#4ECB73',
            '#FBD437',
            '#F2637B',
            '#975FE5',
          ],
          backgroundColor: 'rgba(252,252,252,0)',
          tooltip: {
            // 鼠标悬浮提示框显示 X和Y 轴数据
            trigger: 'item',
            backgroundColor: 'rgba(32, 33, 36,.7)',
            borderColor: 'rgba(32, 33, 36,0.20)',
            borderWidth: 1,
            textStyle: {
              // 文字提示样式
              color: '#fff',
              fontSize: '12',
            },
            axisPointer: {
              // 坐标轴虚线
              type: 'cross',
              label: {
                backgroundColor: '#6a7985',
              },
            },
          },
          grid: {
            top: '4%',
            left: '2%',
            right: '4%',
            bottom: '0%',
            containLabel: true,
          },
          xAxis: [
            {
              type: 'category',
              /*boundaryGap: false,*/
              data: [],
              axisTick: {
                alignWithLabel: true,
              },
            },
          ],
          yAxis: [
            {
              type: 'value',
            },
          ],
          series: [
            {
              name: '相册数量',
              type: 'pie',
              barWidth: '60%',
              data: {
                name: '相册',
                value: '5',
              },
            },
          ],
        },
        //资讯
        zx: {
          color: [
            '#1890FF',
            '#36CBCB',
            '#4ECB73',
            '#FBD437',
            '#F2637B',
            '#975FE5',
          ],
          backgroundColor: 'rgba(252,252,252,0)',
          tooltip: {
            // 鼠标悬浮提示框显示 X和Y 轴数据
            trigger: 'item',
            backgroundColor: 'rgba(32, 33, 36,.7)',
            borderColor: 'rgba(32, 33, 36,0.20)',
            borderWidth: 1,
            textStyle: {
              // 文字提示样式
              color: '#fff',
              fontSize: '12',
            },
            axisPointer: {
              // 坐标轴虚线
              type: 'cross',
              label: {
                backgroundColor: '#6a7985',
              },
            },
          },

          grid: {
            top: '4%',
            left: '2%',
            right: '4%',
            bottom: '0%',
            containLabel: true,
          },
          xAxis: [
            {
              type: 'category',
              /*boundaryGap: false,*/
              data: [],
              axisTick: {
                alignWithLabel: true,
              },
            },
          ],
          yAxis: [
            {
              type: 'value',
            },
          ],
          series: [
            {
              name: '资讯数量',
              type: 'pie',
              barWidth: '60%',
              data: [
                {
                  name: '资讯',
                  value: '5',
                },
              ],
            },
          ],
        },
        //更新日志
        reverse: true,
        activities: [],
        noticeList: [],
        //其他信息
        userAgent: navigator.userAgent,
        //卡片图标
        iconList: [
          {
            icon: 'bullhorn',
            title: '校友互助',
            link: '/helpManagement/index',
            color: '#ff85c0',
          },
          {
            icon: 'gift',
            title: '校友活动',
            link: '/activityManagement/index',
            color: '#ffd666',
          },

          {
            icon: 'photo-video',
            title: '校友相册',
            link: '/albumManagement/index',
            color: '#ff9c6e',
          },
          {
            icon: 'coffee',
            title: '校友资讯',
            link: '/newsManagement/index',
            color: '#95de64',
          },
          {
            icon: 'school',
            title: '校友',
            link: '/userManagement/index',
            color: '#ffc069',
          },
          {
            icon: 'table',
            title: '评论',
            link: '/commentManagement/index',
            color: '#5cdbd3',
          },
          {
            icon: 'laptop-code',
            title: '学历',
            link: '/userManagement/userEducationalBackground',
            color: '#b37feb',
          },
          {
            icon: 'book',
            title: '行业领域',
            link: '/userManagement/userClassification',
            color: '#69c0ff',
          },
        ],
        //饼图数据
        classificationPieData: {},
        number: '',
      }
    },
    created() {
      this.fetchData()
    },
    beforeDestroy() {
      clearInterval(this.timer)
    },
    mounted() {
      // let base = +new Date()
      // let oneDay = 24 * 3600 * 1000
      // let date = []
      // let data = [Math.random() * 1500]
      // let now = new Date(base)
      // const addData = (shift) => {
      //   now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/')
      //   date.push(now)
      //   data.push(this.$baseLodash.random(20000, 60000))
      //   if (shift) {
      //     date.shift()
      //     data.shift()
      //   }
      //   now = new Date(+new Date(now) + oneDay)
      // }
      // for (let i = 1; i < 6; i++) {
      //   addData()
      // }
      // addData(true)
      // this.fwl.xAxis[0].data = date
      // this.fwl.series[0].data = data
      // this.timer = setInterval((Index) => {
      //   addData(true)
      //   this.fwl.xAxis[0].data = date
      //   this.fwl.series[0].data = data
      // }, 3000)
    },
    methods: {
      //获取数据
      async fetchData() {
        //曲线图 访问量
        await visitQuantity().then((res) => {
          debugger
          if (res.code == 200) {
            this.fwlData = res.data
            // this.fwl.series[0].data = res.data.viewList.map(
            //   (item) => item.value
            // )
            // this.fwl.xAxis[0].data = res.data.viewList.map((item) => item.name)
            this.config1.endVal = res.data.total

            //定时器 每次储存5个，循环15个
            let date = []
            let data = []
            this.number = this.fwlData.viewList.length - 16
            const addData = (shift) => {
              for (let i = this.number; i < this.number + 5; i++) {
                // debugger
                date.push(this.fwlData.viewList[i].name)
                data.push(this.fwlData.viewList[i].value)
                if (shift) {
                  date.shift()
                  data.shift()
                }
              }
            }
            addData()
            this.number += 5
            this.fwl.xAxis[0].data = date
            this.fwl.series[0].data = data
            //定时
            this.timer = setInterval(() => {
              addData(true)
              this.number += 5
              this.fwl.xAxis[0].data = date
              this.fwl.series[0].data = data
              if (this.number == this.fwlData.viewList.length - 1) {
                this.number = this.fwlData.viewList.length - 16
              }
            }, 3000)
          } else {
            this.$baseMessage('访问量获取失败', 'error')
          }
        })

        //柱形图 授权数
        await authorizationQuantity().then((res) => {
          if (res.code == 200) {
            this.sqsData = res
            this.sqs.series[0].data = res.data.viewList.map(
              (item) => item.value
            )
            this.sqs.xAxis[0].data = res.data.viewList.map((item) => item.name)
            this.config2.endVal = res.data.total
            debugger
          } else {
            this.$baseMessage('授权数获取失败', 'error')
          }
        })

        //类别饼图
        await classificationPie().then((res) => {
          if (res.code == 200) {
            this.classificationPieData = res.data
            //赋值

            //互助
            this.config3.endVal =
              this.classificationPieData.helpClassificationTotal
            this.hz.series[0].data =
              this.classificationPieData.helpClassificationList

            //活动
            this.config4.endVal =
              this.classificationPieData.activityClassificationTotal
            this.hd.series[0].data =
              this.classificationPieData.activityClassificationList

            //相册
            this.config5.endVal =
              this.classificationPieData.albumClassificationTotal
            this.xc.series[0].data =
              this.classificationPieData.albumClassificationList

            //资讯
            this.config6.endVal =
              this.classificationPieData.newsClassificationTotal
            this.zx.series[0].data =
              this.classificationPieData.newsClassificationList
          } else {
            this.$baseMessage('饼图数据获取失败', 'error')
          }
        })
      },
    },
  }
</script>
<style lang="scss" scoped>
  .index-container {
    padding: 0 !important;
    margin: 0 !important;
    background: #f5f7f8 !important;

    ::v-deep {
      .el-alert {
        padding: $base-padding;

        &--info.is-light {
          min-height: 82px;
          padding: $base-padding;
          margin-bottom: 15px;
          color: #909399;
          background-color: $base-color-white;
          border: 1px solid #ebeef5;
        }
      }

      .el-card__body {
        .echarts {
          width: 100%;
          height: 115px;
        }
      }
    }

    .card {
      ::v-deep {
        .el-card__body {
          .echarts {
            width: 100%;
            height: 305px;
          }
        }
      }
    }

    .bottom {
      padding-top: 20px;
      margin-top: 5px;
      color: #595959;
      text-align: left;
      border-top: 1px solid $base-border-color;
    }

    .table {
      width: 100%;
      color: #666;
      border-collapse: collapse;
      background-color: #fff;

      td {
        position: relative;
        min-height: 20px;
        padding: 9px 15px;
        font-size: 14px;
        line-height: 20px;
        border: 1px solid #e6e6e6;

        &:nth-child(odd) {
          width: 20%;
          text-align: right;
          background-color: #f7f7f7;
        }
      }
    }

    .icon-panel {
      height: 117px;
      text-align: center;
      cursor: pointer;

      svg {
        font-size: 40px;
      }

      p {
        margin-top: 10px;
      }
    }

    .bottom-btn {
      button {
        margin: 5px 10px 15px 0;
      }
    }
  }
</style>
